<template>
	<div>

		<el-dialog :visible.sync="visible1" :close-on-click-modal="false" width="60%">
			<div class="displayFlexBet" style="margin-bottom: 10px;">
				<div></div>
				<div>
					<el-button type="primary" @click="addClick()">+ 新增</el-button>
				</div>
			</div>
			<el-table :data="tableData" style="width: 100%" border size="mini">
				<el-table-column prop="mainTitle" label="分类" width="180">
				</el-table-column>
				<el-table-column prop="title" label="名称" width="180">
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间">
				</el-table-column>
				<el-table-column label="操作" prop="contacts" align="center">
					<template scope="scope">
						<el-button type="text" size="small" @click="editThis(scope.row)">编辑</el-button>
						<el-button type="text" size="small" @click="deleteThis(scope.row)"
							style="color: brown;">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<el-dialog :visible.sync="visible2" :close-on-click-modal="false" @closed="close">
			<el-form ref="form" :model="form" :rules="formRules" label-width="120px" style="width: 100%;">
				<el-form-item label="类别" prop="mainId">
					<el-select v-model="form.mainId" placeholder="请选择档案类别">
						<el-option v-for="item in dataList1" :label="item.title" :value="item.mainId">
						</el-option>
					</el-select>
				</el-form-item>

				<!-- 				<el-form-item label="子类" prop="id" v-if="form.mainId">
					<el-select v-model="form.id" placeholder="请选择子类">
						<el-option v-for="item in dataList2" :label="item.name" :value="item.code">
						</el-option>
					</el-select>
				</el-form-item> -->

				<el-form-item label="标题" prop="title">
					<el-input placeholder="请输入标题" v-model="form.title" style="width: 218px;"></el-input>
				</el-form-item>

				<el-form-item style="text-align: center;margin-left: -90px!important;">
					<el-button type="primary" @click="saveOrUpdate">保存</el-button>
					<el-button @click="visible2 = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	let that
	export default {
		data() {
			return {
				visible1: false,
				visible2: false,
				tableData: [],
				tableParams: {
					mainId: ''
				},
				dataList1: [],
				dataList2: [],
				form: {
					mainId: '', // 大类（废气、废水）
					id: '',
					title: ''
				},
				formRules: {
					mainId: [{
						required: true,
						message: '请选择大类',
						trigger: 'blur'
					}],

					title: [{
						required: true,
						message: '请输入与标题',
						trigger: 'blur'
					}]
				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this
		},

		methods: {
			close() {
				that.$emit("close", true)
			},

			//编辑
			async editThis(item) {
				await that.getDocumentScheduleTypeList()
				that.form = item
				that.visible2 = true
			},

			deleteThis(item) {
				console.log(item)
				this.$confirm('是否删除此档案分类, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/customDocument/deleteCustomDocumentCategoryItem',
						contentType: 'application/x-www-form-urlencoded',
						data: {
							id: item.id
						},
						success: function(result) {
							that.getCustomDocumentCategoryItemList()
						}
					})
				})
			},

			getCustomDocumentCategoryItemList() {
				that.ajax({
					url: '/customDocument/getCustomDocumentCategoryItemList',
					contentType: 'application/x-www-form-urlencoded',
					data: that.tableParams,
					success: function(result) {
						that.tableData = result.data
					}
				})
			},

			getDocumentScheduleTypeList() {
				return new Promise((resolve, reject) => {
					that.ajax({
						url: '/document/getSimpleCategoryMainDataList',
						contentType: 'application/x-www-form-urlencoded',
						data: {},
						success: function(result) {
							that.dataList1 = result.data
							resolve(result.data)
						}
					})
				})
			},

			open() {
				that.visible1 = true
				that.getCustomDocumentCategoryItemList()
			},

			addClick() {
				that.visible2 = true
				that.getDocumentScheduleTypeList()
				that.getDocumentScheduleContentCodeList()
			},

			saveOrUpdate() {
				that.ajax({
					url: '/customDocument/saveCustomDocumentCategoryItem',
					contentType: 'application/json',
					data: JSON.stringify(that.form),
					success: function(result) {
						if (result.status == 1 && result.data) {
							if (that.form.id) {
								that.$message.success('修改成功');
							} else {
								that.$message.success('保存成功');
							}
							that.visible2 = false;
							that.getCustomDocumentCategoryItemList();
							that.$emit("addSuccess", true)
						} else {
							that.$message.error('保存信息失败');
						}
					}
				});
			},

			getDocumentScheduleContentCodeList() {
				return new Promise((resolve, reject) => {
					that.ajax({
						url: '/documentEntSchedule/getDocumentScheduleContentCodeList',
						contentType: 'application/x-www-form-urlencoded',
						data: {
							code: that.form.mainId
						},
						success: function(result) {
							that.dataList2 = result.data
							resolve(result.data)
						}
					})
				})
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>